<template>
  <div>
    <div class="header">
      <div class="logo">
        <img src="@/assets/Toplogo.png" alt="">
      </div>

      <!-- 搜索按钮和消息按钮 -->
      <div class="functionStyle">
        <!-- <i class="el-icon-search"></i> -->
        <!-- 消息弹窗 -->
        <div>
          <!-- 这里的css都写在app.vue里面，因为这个弹窗和body同级 -->
          <el-popover @show="show" @hide="hide" :append-to-body="false" placement="bottom-start" v-model="popoverShow"
            width="360" trigger="click">
            <div class="messageBox">
              <div class="top">
                <span>消息通知</span>
                <span @click="LSXX">历史消息</span>
              </div>
              <div v-if="messageList.length > 0" class="messageList">
                <div class="el" v-for="item, i in messageList" :key="i" @click="messageElClick(item)">
                  <div class="el_left">
                    <div class="circle" v-if="item.ifRead == 0"></div>
                    <i class="el-icon-s-comment"></i>
                  </div>
                  <div class="el_center">
                    <div class="title">{{ item.message.title }}</div>
                    <div class="el_center_main">{{ item.message.pushSummary }}</div>
                  </div>
                  <div class="el_right">
                    <div class="time">{{ item.createTime.slice(0, 10) }}</div>
                  </div>
                </div>
              </div>
              <div v-else>暂无数据</div>
            </div>
            <!-- 点击的消息按钮 -->
            <i class="el-icon-bell" slot="reference">
              <el-badge v-if="badgeNum != 0" :value="badgeNum" class="item" :max="99">
              </el-badge>
            </i>
          </el-popover>
        </div>
      </div>

      <!-- 大屏按钮 -->
      <div v-if="largeScreenShow" class="largeScreenBox" @click="golargeScreen">
        <el-tooltip class="item" effect="dark" content="数据大屏" placement="bottom">
           <img style="width: 26px;height: 26px;" src="../assets/shujudaping.png" alt="">
        </el-tooltip>
      </div>
      <!-- 右边退出和账号 -->
      <div class="right-corner">

        <svg t="1685439776820" class="icon" viewBox="0 0 1024 1024" @click="logout()" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3718" width="26" height="26">
          <path
            d="M416 757.333333h-170.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333v-554.666667c0-12.8 8.533333-21.333333 21.333333-21.333333h170.666667c23.466667 0 42.666667-19.2 42.666667-42.666667s-19.2-42.666667-42.666667-42.666666h-170.666667c-59.733333 0-106.666667 46.933333-106.666666 106.666666v554.666667c0 59.733333 46.933333 106.666667 106.666666 106.666667h170.666667c23.466667 0 42.666667-19.2 42.666667-42.666667s-19.2-42.666667-42.666667-42.666667z"
            p-id="3719" fill="#e6e6e6"></path>
          <path
            d="M902.4 454.4L661.333333 234.666667c-12.8-10.666667-32-2.133333-32 12.8v149.333333H366.933333c-12.8 0-21.333333 14.933333-21.333333 32v64c0 17.066667 8.533333 32 21.333333 32h262.4v151.466667c0 14.933333 19.2 23.466667 29.866667 14.933333l241.066667-211.2c8.533333-8.533333 8.533333-19.2 2.133333-25.6z"
            p-id="3720" fill="#e6e6e6"></path>
        </svg>
        <!-- <svg-icon icon-class="logout"></svg-icon> -->
      </div>
      <div class="header-account">
        <span style="color:rgb(249, 249, 250)">{{ account }}</span>
      </div>
    </div>
    <app-menu></app-menu>
    <app-main></app-main>
  </div>
</template>


<script>
// 会导入./AppHeader下面的index.vue组件
// import AppHeader from "./AppHeader"
import AppMenu from "./system/menu"
import AppMain from "./system/main"
// import SvgIcon from '../components/SvgIcon';

// 导入子组件，缩写格式 AppHeader: AppHeader
export default {
  components: { AppMenu, AppMain },
  data() {
    return {
      largeScreenShow:false,
      account: 0,
      gridData: [],
      badgeNum: 0,
      messageList: [],
      Notification: null,
      popoverShow: false,
    };

  },
  async mounted() {
    this.$eventBus.$on('showlargeScreenIcon', (val) => {
       this.largeScreenShow = val
     })
    //页面数据初始化
    this.account = sessionStorage.getItem("soa_account")
    this.getMessageList()
    this.WWWebSocket()
  },
  destroyed() {
    if (this.Notification) {
      this.Notification.close();
    }

  },
  methods: {
    golargeScreen() {
      this.$router.push('/largeScreen')
    },
    async messageElClick(item) { //铃铛列表点击事件
      console.log(item, '铃铛点击按钮');
      let res = await this.$api.message.MywebMessageread({ //已读接口
        "messageType": item.type,
        "messageId": item.id
      })
      this.getMessageList()
      this.popoverShow = false



      switch (item.type) {
        case 'order':
          if (this.$route.name == '工单详情' && this.$route.query.id == item.message.id) {
            location.reload()
            return
          }
          this.$router.push('/workOrder/workDetail?id=' + item.message.id)
          break
        case 'notice':
        case 'information':
          if (item.message && item.message.pushDescription) {
            sessionStorage.setItem('PreviewData', item.message.pushDescription)
            if (this.$route.name == '公告资讯详情') {
              location.reload()
              return
            }
            this.$router.push('/Preview')
          } else {
            this.$message.error('缺少消息内容')
          }

          break
        case 'noticeApproval':
          if (this.$route.name == '公告审批') {
            location.reload()
            return
          }
          this.$router.push(`/webNotice/NoticeShenPi?id=${item.message.id}&name=审批`)
          break
        case 'informationApproval':
          if (this.$route.name == '资讯审批') {
            location.reload()
            return
          }
          this.$router.push(`/information/informationShenPi?id=id=${item.message.id}&name=详情`)
          break
        case 'customerRoomApproval':
          if (this.$route.name == '入住审批') {
            location.reload()
            return
          }
          this.$router.push('/approvalForCheckIn')
          break
      }
    },
    WWWebSocket() {
      if ('WebSocket' in window) {
        // alert('支持')
      } else {
        alert('不支持长链接，请尝试更换浏览器或升级浏览器')
      }
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))

      let wsUrl = defaultWebSocketUrl + `/websocket/${userData.unitType}_${userData.id}`;
      let socket = new WebSocket(wsUrl);

      socket.onopen = (event) => { // 在这里发送初始消息或进行其他初始化操作 

        console.log("成功连接" + wsUrl, event);

      };

      socket.onclose = (event) => {// 在这里处理连接关闭的情况  
        console.log("连接关闭" + wsUrl);
      };

      socket.onerror = (error) => {// 在这里处理错误  
        console.error("连接错误啦:" + wsUrl, error);
      };

      socket.onmessage = (event) => { // 在这里处理接收到的消息  
        console.log("接收到消息啦:", event.data);
        this.Notification = this.$notify({
          title: '您有一条新消息！',
          message: '点击处理 →',
          showClose: false,
          iconClass: 'el-icon-message-solid',
          offset: 40,
          onClick: () => {
            console.log(6666,);
            this.Notification.close()
            if (this.$route.path == "/message/List") {
              this.$message('您已在该页面');
            } else {
              this.$router.push('/message/List')
            }
          }
        })
        this.getMessageList()
      };
    },
    async getMessageList() {
      let res = await this.$api.message.MysummaryList({})
      console.log(res, '铃铛消息列表');
      this.messageList = []
      res.data.forEach(el => {

        if (el.message) {
          this.messageList.push(el) //铃铛最终数据，把message字段为空的去掉了，应该是假数据
        }
      })
      let total = 0
      this.messageList.forEach(el => {
        if (el.ifRead == 0) {
          total += 1
        }
      })
      this.badgeNum = total
    },
    LSXX() {
      console.log(this.$route);
      if (this.$route.path == "/message/List") {
        this.$message('您已在该页面');
      } else {
        this.$router.push('/message/List')
      }
    },
    logout() {
      // sessionStorage.clear();
      // sessionStorage.setItem("soa_account","")
      // sessionStorage.setItem("soa_token","")
      sessionStorage.clear();
      this.$router.push('/login')
    },
    async show() {
      console.log('我打开啦');

    },
    hide() {
      console.log('我关闭啦');
    },
  }
};
</script>

<style lang="less" scoped>
.largeScreenBox {
  cursor: pointer;
  color: white;
  position: absolute;
  right: 250px;
  top: 12px;
  // top: 50%;
  // transform: translateY(-50%);
}

/* 头部样式 */
.header {
  width: 100%;
  height: 50px;
  border: 1px;
  position: absolute;
  // line-height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #000000;

  .functionStyle {
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75px;



    /deep/ .el-icon-search {
      color: white;
      font-size: 22px;
    }

    /deep/ .el-icon-bell {
      color: white;
      font-size: 22px;
      position: relative;

      .item {
        position: absolute;
        left: 10px;
        top: -6px;

        .el-badge__content {
          background-color: red !important;
          border: none;
          font-size: 10px;
          padding: 0 6px;
          transform: scale(0.7);
        }
      }
    }

    .messageBox {
      width: 100%;

      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        span {
          &:nth-child(2) {
            color: #409eff;
            cursor: pointer;
          }
        }
      }

      .messageList {
        width: 100%;
        max-height: 400px;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          display: none;
        }

        .el {
          padding: 10px;
          width: 100%;
          height: 100px;
          box-sizing: border-box;
          border-bottom: 1px solid #aaa;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          &:hover {
            background-color: #b9dcff;
          }

          .el_left {
            height: 100%;
            width: 30px;
            position: relative;

            .circle {
              width: 6px;
              height: 6px;
              background: #409eff;
              border-radius: 1000px;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }

            i {
              font-size: 22px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          .el_center {
            width: 200px;

            .title {
              font-weight: 600;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .el_center_main {
              width: 100%;
              margin: 15px 0;
              overflow: hidden;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}

.logo {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 195px;
  height: 34px;

  img {
    width: 100%;
    height: 100%;
  }
}

/* 左侧样式 */
.navbar {
  z-index: 1;
  position: absolute;
  width: 210px;
  top: 50px;
  /* 距离上面50像素 */
  left: 0px;
  bottom: 0px;
  overflow-y: auto;
  /* 当内容过多时y轴出现滚动条 */
  background-color: #ebebeb;

  &::-webkit-scrollbar {
    width: 0;
    background-color: white;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgb(193, 193, 193);
  }
}

/* 主区域 */
.main {
  position: absolute;
  top: 50px;
  left: 210px;
  bottom: 0px;
  right: 0px;
  /* 距离右边0像素 */
  // padding: 10px;
  overflow-y: auto;
  /* 当内容过多时y轴出现滚动条 */
  /* background-color: red; */
}

/* 右上角菜单 */
.right-corner {
  float: right;
  height: 100%;
  line-height: 50px;
  margin-right: 10px;
}

.header-account {
  float: right;
  height: 100%;
  line-height: 50px;
  margin-right: 15px;
}

.icon {
  margin: 10px;
}
</style>